<template>
    <div id="home-page"  >
        <tab-bar :class="{item3Active:item3,toggleColor:navToggle}">
         <tab-bar-item  path="/homePage/recommend" active-color="white" font-size="1.2rem">
          <div  slot="item-text">{{tit[0]}}</div>
         </tab-bar-item>
          <tab-bar-item path="/homePage/hot" active-color="white"  font-size="1.2rem">
            <div slot="item-text">{{tit[1]}}</div>
          </tab-bar-item>
          <tab-bar-item  path="/homePage/ranking" font-size="1.2rem">
            <div slot="item-text">{{tit[2]}}</div>
          </tab-bar-item>
          <tab-bar-item  path="/homePage/positiveEnergy" font-size="1.2rem" active-color="white">
            <div slot="item-text">{{tit[3]}}</div>
          </tab-bar-item>
        </tab-bar>

      <transition :name="transitionName">
        <keep-alive>
          <router-view  class="child-view"></router-view>
        </keep-alive>
      </transition>

    </div>
</template>

<script>
  import TabBar from '../../components/tabbar/TabBar'
  import TabBarItem from '../../components/tabbar/TabBarItem'
    export default {
        name: "HomePage",
      components: {TabBar,
        TabBarItem},
      data(){
          return{
            transitionName: '',
            tit:['推荐','热门','排行','正能量'],
            activeStyle:{
              fontSize:'12px'
            },
            keepPath:'/homePage/recommend',
            navToggle:false
          }
      },
      watch: {
        '$route'(to, from) {
          if(to.meta.index > from.meta.index){
            this.transitionName = 'slide-left';
          }else{
            this.transitionName = 'slide-right';
          }
        }
      },
      activated(){  //homepage活跃时
        // console.log('activated');
        if(this.$route.path!=this.keepPath){//解决在首页刷新重复添加路由报错的问题
          this.$router.push(this.keepPath)
        }
        //滚动条事件监听
        window.addEventListener('scroll', this.handleScroll)
      },
      deactivated(){
        //离开此页面时摧毁事件监听
        window.removeEventListener('scroll', this.handleScroll)
      },
      beforeRouteLeave(to,from,next){   //离开此路由之前 保留切换tabbar之前的路由
        this.keepPath = this.$route.path
        // console.log('befor',this.keepPath);
        next()
      },
      mounted () {

      },
      methods:{
        //监听滚动条位置
        handleScroll (e) {
          var top = document.documentElement.scrollTop
          // console.log(document.documentElement.scrollTop)
          if(top>10){
            this.navToggle = true
          }else{
            this.navToggle = false
          }
        }
      },
      computed:{
          item3(){
            //判断第三项是否被选中
            if(this.$route.path.indexOf('homePage/ranking')!==-1){
              return true
            }else{
              return false
            }
        }
      }
    }
</script>

<style lang="less">
/*@import "../../assets/css/test";*/
@import "../../assets/css/homePage/homePage";

</style>
